<template>
    <div 
    v-loading.fullscreen.lock="fullscreenLoading">
      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form>
        <slot name="default"></slot>
        <el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="action"
            :headers="headers"
            :data="extraData"
            :before-upload="onUploadStart"
            :on-success="onUploadSuccess"
            :on-error="onUploadError"
            :limit="limit"
            :accept="accept"
            :file-list="fileList"
            :show-file-list="true"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div v-if="accept && '*' != accept" slot="tip" class="el-upload__tip">只能上传{{accept}}文件</div>
            
          </el-upload>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传</el-button>
        <el-button type="primary" @click="closeUpload">关闭</el-button>
      </div> 
    </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
    props: {
        title:{type:String, default:"导入数据"},
        isImport: {type:Boolean, default:false},
        action: {type: String, default:null},
        accept: {type: String, default:"*"},
        limit: {type: Number, default: 1},
        // 额外的请求参数
        extraData: {type: Object, default: function() { return {} }}
    },
    data() {
        return {
            open: false,
            fullscreenLoading: false,
            fileList: [],
            headers: {
                Authorization: "Bearer " + getToken(),
            },
        }
    },
    methods: {
     handleImport() {
      this.open = true;
    },
    openDialog() {
      this.open = true;
    },
    closeUpload() {
      this.open = false;
      this.fileList = []
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    onUploadStart() {
      this.fullscreenLoading = true;
      return true;
    },
    onUploadSuccess(response) {
      this.fullscreenLoading = false;
      if (200 == response.code) {
          console.log(response,'response');
          this.onUploadSuccessSimple(response);
          // if (this.isImport) {
          //   this.onUploadSuccessImport(response);
          // } else {
          //   this.onUploadSuccessSimple(response);
          // }
      } else {
          this.fileList = []
          this.msgError(response.msg)
          this.$emit("uploadError", response);
      }
    },
    onUploadError(error) {
      this.fullscreenLoading = false;
        this.fileList = []
        this.msgError("操作失败")
        this.$emit("uploadError", error);
    },
    onUploadSuccessSimple(response) {
      this.msgSuccess(response.msg || "操作成功")
      this.$emit("uploadSuccess", response);
      this.closeUpload();
    },
    onUploadSuccessImport(response) {
      // 如果有错误数据，弹出下载错误文件列表
      if (response.data.errorCount > 0) {
          let message = "<p style='color:black;'>总数据：" + response.data.totalCount+ "条</p>"
            + "<p style='color:green;'>成功：" + response.data.successCount + "条</p>"
            + "<p style='color:green;margin-left:10px;'>插入：" + response.data.insertCount + "条</p>" 
            + "<p style='color:green;margin-left:10px;'>更新：" + response.data.updateCount + "条</p>" 
            + "<p style='color:red;'>失败：" + response.data.errorCount + "条</p>" 

            this.$confirm(
                message,
                "导入数据完成",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                //   type: "warning",
                showCancelButton: true,
                        confirmButtonText: '下载错误文件',
                        cancelButtonText: '完成',
                        dangerouslyUseHTMLString: true,
                        callback: (action) => {
                            if (action === "confirm") {
                                window.open(this.downloadUrl(response.data.fileUrl), '_blank');
                            } else {
                                this.closeUpload();
                            }
                        },
                }
            );
      } else {
        this.$emit("uploadSuccess", response);
        this.msgSuccess("导入成功，总计导入：" + response.data.successCount + "条");
        this.closeUpload();
      }
    }
    }
}
</script>